<template>
  <div class="alertModel" v-if="showAlertModel">
    <div class="alertFlex" :style="{width: viewportWidth - 1340 + 'px', left: 740 + 'px'}">
      <div class="alertBack" @click="alertBack"></div>
      <div class="flex-start" v-if="showType === 1">
        <!-- 显示搜索车牌布局 -->
        <div class="In2InputSearch">
          <div class="In2InputContainer flex-start">
            <input class="In2Input" v-model="vehicleNum" @input="inputNum" type="text" placeholder="车牌号搜索">
            <div class="In2Close" @click="clearVehicleNum">
              <div class="In2CloseIcon" v-if="showClearVehicleNum"></div>
            </div>
            <div class="In2Search" @click="handleSearchAlert">
              <div class="sousuo0"></div>
            </div>
          </div>
          <!-- 模糊查询，最多显示5条搜索内容 -->
          <div class="In2SearchContainer" v-if="showIn2SearchContainer">
            <div class="In2SearchItem" v-for="item in data.vehicleNumData" :key="item.num" @click="changeVehicleNumItem(item.num)">{{ item.num }}</div>
          </div>
        </div>
        <!-- 显示车辆视角布局 -->
        <div class="flex-start">
          <div class="diyi"></div>
          <div class="disan"></div>
        </div>
      </div>
      <!-- 显示三急一通按钮布局 -->
      <div class="flex-start" v-if="showType === 2">
        <div class="sjItem" :class="[data.sjTypw === item.type ? 'sj_sel' : 'sj_nor']" v-for="item in data.sjBtnList" :key="item.type">{{ item.name }}</div>
      </div>
      <!-- 路口态势摄像机选中 -->
      <div v-if="showType === 3"></div>
      <!-- 车辆实时事件 -->
      <div v-if="showType === 4"></div>
      <!-- 速度云图 -->
      <div v-if="showType === 5"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject, computed, watch, onMounted, onUnmounted } from 'vue';
import { useUserStore } from '@/store/user';
import { useEmitt } from '@sutpc/vue3-hooks';
const { emitter } = useEmitt();

defineOptions({
  name: 'AlertModel'
})
const userStore = useUserStore()

const data = reactive({
  vehicleNumData: [{
    num: '津A 111111'
  }, {
    num: '津A 222222'
  }, {
    num: '津A 333333'
  }, {
    num: '津A 444444'
  }, {
    num: '津A 555555'
  }],
  sjBtnList: [{
    name: '三急',
    type: 1
  }, {
    name: '超速',
    type: 2
  }, {
    name: '压线',
    type: 3
  }],
  sjTypw: 1
})

const showAlertModel = computed(() => {
  return userStore.getShowAlertModel
})

// 关闭总弹窗
const alertBack = () => {
  userStore.setShowLayer2In(true)
  userStore.setShowAlertModel(0)
  showType.value = 0
}
// 通过传入类型判断显示什么内容
// 类型为1时，显示车牌搜索框和第一第三视角
// 类型为2时，显示三急按钮list
// 弹窗内显示类型1, 车牌搜索弹窗
const showType = ref(0)
const getType = (type) => {
  showType.value = type
}
emitter.on('CHANG_ITEM', getType)

// 定义搜索车牌
const vehicleNum = ref('')
// 车牌输入框
const inputNum = () => {
  if (vehicleNum.value) {
    showClearVehicleNum.value = true
    showIn2SearchContainer.value = true
    userStore.setVehicleNum(vehicleNum.value)
  } else {
    showClearVehicleNum.value = false
    showIn2SearchContainer.value = false
    userStore.setVehicleNum('')
  }
}
// 选中模糊查询车牌
const changeVehicleNumItem = (item) => {
  vehicleNum.value = item
  userStore.setVehicleNum(item)
}
// 点击搜索车牌
const handleSearchAlert = () => {
  userStore.setVehicleNum(vehicleNum.value)
  showIn2SearchContainer.value = false
  userStore.setShowLayer2In(false)
}

// 是否显示删除车牌按钮
const showClearVehicleNum = ref(false)

// 是否显示车牌模糊查询
const showIn2SearchContainer = ref(false)

// 清空路口input值
const clearVehicleNum = () => {
  vehicleNum.value = ''
  userStore.setVehicleNum('')
  showClearVehicleNum.value = false
  showIn2SearchContainer.value = false
}

const viewportWidth = computed(() => {
  return window.innerWidth
});


onMounted(() => {
  // emitter.on('CHANG_ITEM', getType)
})

onUnmounted(() => {
  emitter.off('CHANG_ITEM', getType )
})
</script>

<style lang="less" scoped>
.flex-start{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.alertModel{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
  .alertFlex{
    position: absolute;
    margin: 136px auto;
    height: 80px;
    // background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    .alertBack{
      width: 60px;
      height: 60px;
      background-image: url('@{publicPath}static/images/alertBack.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .In2InputSearch{
    position: relative;
    .In2SearchContainer{
      position: absolute;
      width: 504px;
      top: 58px;
      background-color: rgba(0, 40, 66, 0.75);
      .In2SearchItem{
        color: #2E94FF;
        font-size: 24px;
        padding: 10px 34px;
        box-sizing: border-box
      }
    }
  }
  .In2InputContainer{
    width: 504px;
    height: 58px;
    background: rgba(0,40,66,0.75);
    border: 1px solid #005485;
    margin-right: 32px;
  }
  .In2Input{
    font-size: 24px;
    width: 356px;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 16px 24px;
    font-size: 24px;
    color: #ffffff;
  }
  .In2Close{
    width: 50px;
    cursor: pointer;
    .In2CloseIcon{
      width: 16px;
      height: 16px;
      padding: 22px;
      box-sizing: border-box;
      background-image: url('@{publicPath}static/images/inputClose.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
  .In2Search{
    width: 96px;
    height: 58px;
    background-color:#007DFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .sousuo0{
      width: 28px;
      height: 28px;
      background-image: url('@{publicPath}static/images/sousuo0.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
  .diyi{
    width: 60px;
    height: 60px;
    background-image: url('@{publicPath}static/images/diyi.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin-right: 22px;
    cursor: pointer;
  }
  .disan{
    width: 60px;
    height: 60px;
    background-image: url('@{publicPath}static/images/disan.png');
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
  }
  .sjItem{
    width: 156px;
    height: 52px;
    font-size: 26px;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    margin-right: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sj_sel{
    background-image: url('@{publicPath}static/images/sj_sel.png');
  }
  .sj_nor{
    background-image: url('@{publicPath}static/images/sj_nor.png');
  }
}
</style>